<template>
  <div class="app-container clue1-page">
    <!-- 搜索表单区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="form-search"
      size="small"
      style="margin-top:20px"
    >
      <el-form-item>
        <el-input v-model="searchForm.colName" placeholder="藏品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.colId"
          placeholder="藏品编号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchForm.year"
          placeholder="请选择年代"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in yearList"
            :key="index"
            :label="item.yearName"
            :value="item.yearName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getAllRegister">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="colId" label="藏品登记号"></el-table-column>
      <el-table-column prop="colName" label="藏品名称"></el-table-column>
      <el-table-column prop="gradeId" label="藏品级别"></el-table-column>
      <el-table-column prop="type" label="藏品类型"></el-table-column>
      <el-table-column prop="number" label="藏品数量"></el-table-column>
      <el-table-column prop="quality" label="藏品质量"></el-table-column>
      <el-table-column prop="come" label="藏品来源"></el-table-column>
      <el-table-column prop="status" label="保存状态"></el-table-column>
      <el-table-column prop="yearId" label="年代"></el-table-column>
      <el-table-column prop="colDesc" label="藏品描述"></el-table-column>
      <el-table-column prop="intime" label="入藏时间"></el-table-column>
      <!--  -->
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="check(scope.row.id)"
          >
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-warp">
      <el-pagination
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>import {
  getOthers,
  getAllTwoRegister,
  commitCol
} from '@/api/clue/register';
export default {
  data() {
    return {
      yearList: [],
      loading: false, // 加载遮罩
      dialogAddVisible: false,
      tableData: [], // 表格数据
      current: 1, // 当前页
      limit: 10, // 一页几个
      total: 0, // 总数
      searchForm: {
        colId: '',
        colName: '',
        year: ''
      },
      activeIndex: '0'
    };
  },
  created() {
    this.getAllRegister();
    this.getOthers();
  },
  methods: {
    check(id) {
      this.$prompt('请输入建议', '审核', {
        distinguishCancelAndClose: true,
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        cancelButtonClass: 'el-button--danger',
        inputValidator: val => {
          this.commitDesc = val;
          return true;
        }
      })
        .then(async ({ value }) => {
          const { data: res } = await commitCol({
            id: id,
            desc: value,
            status: 1
          });
          if (res.code === 200) {
            this.getAllRegister();
            this.$message({
              type: 'success',
              message: res.message
            });
          }
        })
        .catch(async (action, instance) => {
          if (action !== 'cancel') return;
          console.log(action, instance);
          const { data: res } = await commitCol({
            id: id,
            desc: this.commitDesc,
            status: -1
          });
          if (res.code === 200) {
            this.getAllRegister();
            this.$message({
              type: 'success',
              message: res.message
            });
          }
        });
    },
    reset() {
      this.searchForm = {
        roleId: null,
        userName: '',
        userPhone: ''
      };
    },
    async getOthers() {
      const { data: res } = await getOthers();
      console.log(res);
      if (res.code === 200) {
        this.yearList = res.data.yearList;
      } else {
        this.$message.error('下拉框获取失败');
      }
    },
    /**
     * * 线索详情对话框
     */
    showDetailDialog() {
      this.dialogVisible = true;
    },
    /**
     * 处理分页修改
     */
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    handleClick() {},
    /**
     * 获取全部线索
     */
    async getAllRegister() {
      this.loading = true;
      const { data: res } = await getAllTwoRegister(
        this.current,
        this.limit,
        this.searchForm
      );
      this.tableData = res.data.ClueList;
      this.total = res.data.total;
      this.loading = false;
    },
    /**
     * 重置查询
     */
    resetSearch() {
      this.searchForm = {
        roleId: null,
        userName: '',
        userPhone: ''
      };
    }
  }
};
</script>

<style lang="scss">
  .form-search {
    .el-input {
      width: 180px;
    }
  }
</style>

<style lang="scss" scoped>
  .clue1-page {
    .pagination-warp {
      margin-top: 20px;
      position: relative;
      .el-pagination {
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    .el-table {
      margin-top: 10px;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;
    }

    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
</style>
